<template>
  <view class="evaluate-page">
	  <!-- 标题 -->
	  	  <text class="title">服务评分</text>
	      <!-- 顶部区域 -->
	      <view class="header">
	        <image class="shop-avatar" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.-aiO00BuvObwE8qX120_KAHaE3?w=261&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" mode="aspectFill"/>
	        <view class="header-info">
				
	  		  <!-- 店铺信息 -->
	  			<view class="shop-info">
	  				<text class="shop-name">小王汽车美容店</text>
	  			</view>
				
	          <!-- 星级评分 -->
	         		<view class="star-flex" style="margin:20rpx 85rpx;">
	         		  <block v-for="(item,index) in scoreArray" :key='index' ><!-- 遍历评分列表 -->
	         		    <!-- 设置触摸事件和点击事件为同一个方法,否则点击却不滑动的话,不触发事件 -->
	         		    <view class='starLen' @touchmove='changeScore'  @tap='changeScore' >
	         		      <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
	         		      <!-- src部分可以这样写 src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}"  ，这样可以在js文件把fullStarUrl和nullStarUrl去掉 -->
	         		      <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl"/>   
	         		    </view>
	         		  </block>
	         		</view>
					<!-- 显示当前评分 -->
					<view class='scoreContent'>
					{{scoreContent}}
					</view>
	        </view>
	  	  </view>
		  
	  	
	      <!-- 评价内容 -->
	      <view class="review-section">
			  <text style="margin-bottom: 20rpx;">填写评价(0-200字)</text>
	        <textarea 
	          class="comment-input" 
	          placeholder="请写下您的意见和建议..." 
	          v-model="comment"
	          maxlength="200"
	        ></textarea>
	      </view>
	  
	      <!-- 照片上传 -->
	      <view class="photo-upload">
	        <text class="photo-label">照片（选填）</text>
	        <view class="photo-preview">
	          <image 
	            v-if="photoSrc" 
	            class="uploaded-photo" 
	            :src="photoSrc"
	          ></image>
	          <text class="upload-btn" @click="chooseImage">上传照片</text>
	        </view>
	      </view>
	  
	      <!-- 提交按钮 -->
	      <view class="submit-section">
	  		
	        <button class="submit-btn" @click="submitReview">提交</button>
	      </view>
</view>
	
</template>



<script setup>
import { ref } from 'vue';

const comment = ref('');
const photoSrc = ref('');
const score = ref(0);
const fullStarUrl = '/static/满星.png';
const nullStarUrl = '/static/空星.png';
const scoreArray = [1, 2, 3, 4, 5];
const scoreText = ['1星', '2星', '3星', '4星', '5星'];
const scoreContent = ref('');

function chooseImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      photoSrc.value = res.tempFilePaths[0];
    }
  });
}

function submitReview() {
  if (!comment.value.trim()) {
    uni.showToast({ title: '请输入评价内容' });
    return;
  }
  uni.showToast({
    title: '评价提交成功',
    icon: 'success'
  });
  console.log('提交数据：', {
    comment: comment.value,
    rating: score.value,
    photo: photoSrc.value
  });
}

function changeScore(e) {
  const touchX = e.touches[0].pageX;
  const starMinX = 100; 
  const starWidth = 30; 
  const starLen = 10; 
  const starMaxX = starMinX + starWidth * 5 + starLen * 4;

  if (touchX < starMinX) {
    score.value = 0;
    scoreContent.value = '';
  } else if (touchX > starMinX && touchX < starMaxX) {
    const num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
    if (num !== score.value) {
      score.value = num;
      scoreContent.value = scoreText[num - 1];
    }
  }
}


</script>

<style lang="scss">
	.evaluate-page {
		height: 100vh;
	  padding: 20px;
	  background-color: #fff;
	}
	
	.header {
	  display: flex;
	  flex-wrap: nowrap;
	  align-items: center;
	  margin-bottom: 20px;
	}
	
	.shop-avatar{
	  width: 200rpx;
	  height: 200rpx;
	  border-radius: 8px;
	  margin-right: 15px;
	}
	
	.header-info {
		width: 70%;
	  text-align: center;
	}
	
	.title {
	  font-size: 15px;
	  margin-left: 0;
	}
	
	.rating-stars {
	  margin-top: 8px;
	  display: flex;
	  align-items: center;
	}
	
	.score-text {
	  font-size: 14px;
	  color: #ff9900;
	  margin-left: 10px;
	}
	
	.shop-info {
		font-weight: bold;
	  margin-bottom: 20px;
	}
	
	.shop-name {
	  font-size: 20px;
	  // font-weight: bold;
	  color: #333;
	}

	.review-section{
	  margin-bottom: 20px;
	}
	
	.comment-input {
	  width: 100%;
	  height: 120px;
	  border: 1px solid #eee;
	  border-radius: 4px;
	  padding: 10px;
	  font-size: 14px;
	}
	
	.photo-upload {
	  margin-bottom: 20px;
	}
	
	.photo-label {
	  font-size: 14px;
	  color: #666;
	  margin-bottom: 5px;
	}
	
	.photo-preview {
	  display: flex;
	  align-items: center;
	}
	
	.uploaded-photo {
	  width: 100px;
	  height: 100px;
	  border-radius: 4px;
	  margin-right: 10px;
	}
	
	.upload-btn {
	  font-size: 14px;
	  color: #0084ff;
	}
	
	.submit-section {
	  text-align: center;
	  margin-top: 30px;
	}
	
	.submit-btn {
	  width: 150px;
	  height: 40px;
	  background-color: #0084ff;
	  border-radius: 4px;
	  color: white;
	  font-size: 16px;
	}
	
	
	// 星星
	.star-flex{
		display: flex;
		flex-wrap: nowrap;
	}
	.starLen{
	  margin-right: 10rpx;
	  display: inline-block;
	}
	
	.star{
	  width:50rpx;
	  height:50rpx;
	}
	
	.scoreContent{
		font-size: 20px;
	  color: #ff9900;
	}

</style>

